import React, { Component } from 'react'
import { Outlet, NavLink } from 'react-router-dom'
import layoutStyle from './layout.module.css'

// 一级路由 需要包含OutLet

export default class basic extends Component {
  render() {
    return (
      <div className={layoutStyle.container}>
        <header className={layoutStyle.header}>header</header>
        <main className={layoutStyle.main}>
          <Outlet></Outlet>
        </main>
        <footer className={layoutStyle.footer} style={{ display: 'flex' }}>
          <NavLink style={{ flex: 1 }} to="/">
            home
          </NavLink>
          <NavLink style={{ flex: 1 }} to="/news">
            news
          </NavLink>
          <NavLink style={{ flex: 1 }} to="/cart">
            cart
          </NavLink>
          <NavLink style={{ flex: 1 }} to="/mine">
            mime
          </NavLink>
          <NavLink style={{ flex: 1 }} to="/hook">
            hook
          </NavLink>
          <NavLink style={{ flex: 1 }} to="/demo">
            demo
          </NavLink>
          <NavLink style={{ flex: 1 }} to="/img">
            lazy-img
          </NavLink>
        </footer>
      </div>
    )
  }
}
